<template>
    <section>
        <el-row></el-row>
        <el-row>
            <el-col :offset="1" :span="23">
                <el-button @click="dialogFormVisible = true" type="primary" size="large">
                    发布考试信息
                </el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" border style="width:100%">
            <el-table-column align='center' label="我发布的考试信息" class="head">

                <el-table-column  label="发布时间">
                    <template scope="scope">
                    {{new Date(scope.row.examAddTime).toLocaleDateString()}}
                    </template>
                </el-table-column>

                <el-table-column prop="examForm" label="考试形式">
                </el-table-column>

                <el-table-column prop="examPlace" label="考试地点">
                </el-table-column>

                <el-table-column prop="examStartTimeStr" label="考试开启时间">
                </el-table-column>
                <el-table-column prop="examStopTimeStr" label="考试关闭时间">
                </el-table-column>

                <el-table-column fixed="right" label="操作">
                    <template scope="scope">
                        <el-button @click="cancelDialogVisible=true;examId=scope.row.examId;rowIndex=scope.$index"
                                   type="info" size="small"
                                   :disabled="new Date(scope.row.examStartTimeStr)<new Date()">取消考试
                        </el-button>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>

        <el-dialog title="取消考试" :visible.sync="cancelDialogVisible">
            <el-form :model='this' ref="cancelReason" :rules="rules" label-width="100px">
                <el-form-item prop="cancelReason" label="取消原因">
                    <el-input v-model="cancelReason" placeholder="请输入取消原因" auto-complete="off"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="cancelExam">确 定</el-button>
            </div>
        </el-dialog>


        <!--发布考试的弹窗-->
        <el-dialog title="发布考试信息" :visible.sync="dialogFormVisible">

            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="考试形式" prop="examForm">
                    <el-select v-model="form.examForm" placeholder="请选择">
                        <el-option label="网上考试" value="网上考试"></el-option>
                        <el-option label="现场考试" value="现场考试"></el-option>
                    </el-select>
                </el-form-item>

                <!--增加判断，网上考试不需要地点-->
                <el-form-item label="考试地点" prop="examPlace" v-if="form.examForm=='现场考试'">
                    <el-input v-model="form.examPlace" placeholder="请输入地点"></el-input>
                </el-form-item>

                <el-form-item label="考试时间" prop="examTimeRange">
                    <el-date-picker v-model="form.examTimeRange" align="right" type="daterange" placeholder="选择日期"
                                    :picker-options="pickerOptions1" :editable="false">
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addExam1">确 定</el-button>
            </div>
        </el-dialog>

        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :page-sizes="[15,20,25,30]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </section>
</template>


<script>
    import {exammanger, addExam, deleteexam, cancelExam} from '../../api/api';
    export default {

        data() {
            return {
                total: 0,//列表总条数
                pageSize: 15,//每页条数
                currentPage: 1,//当前页码
                name: "",
                tableData: [],
                form: {
                    examPlace: '',
                    examForm: '网上考试',
                    examTimeRange: ''
                },

                cancelDialogVisible: false, //取消考试弹窗
                cancelReason: '',  //取消原因
                rowIndex: -1, //取消行索引
                examId: -1,//取消ID  数据库id
                dialogTableVisible: false,
                dialogFormVisible: false,
                rules:{
                    examPlace: [{required: true, message: '地点必须填写', trigger: 'blur'}],
                    examForm: [{required: true, message: '考试类型必须选择', trigger: 'blur'}],
                    examTimeRange: [{type:'array',required: true, message: '选择一个时间段', trigger: 'blur'}],
                    cancelReason: [{required: true, message: '取消原因必填', trigger: 'blur'}]
                },

                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                pickerOptions1: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        mounted() {
            this.exammangero();
        },

        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.exammangero();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.exammangero();
            },
            exammangero() {
                let para = {
                    pageSize: this.pageSize,
                    pageNo: this.currentPage,
                };
                para = Object.assign(para, this.filters);

                exammanger(para).then((res) => {
                    if(res.resCode==0){
                        this.total = res.resData.total;
                        this.tableData = res.resData.list;
                    }
                    else{
                        this.$message({
                            type: 'error',
                            message: '服务器返回数据异常'
                        });
                    }
                    this.loading = false;
                });

            },
            /**
             * 2017/8/7 修改 by 雷紫辉
             * 增加表单验证和返回值判断
             * */
            addExam1() {
                this.$refs.ruleForm.validate((v) => {
                    if (v) {
                        this.dialogFormVisible = false;
                        let param = {
                            examStartTime:this.form.examTimeRange[0],
                            examStopTime:this.form.examTimeRange[1],
                            examPlace:this.form.examPlace,
                            examForm:this.form.examForm
                        };
                        addExam(param).then(res => {
                            if (res.resCode == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                            }
                            else {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败!'
                                });
                                this.exammangero(this.currentPage);
                            }
                        });
                    }
                });
            },

            /**
             * 废弃
             * */
            del: function (index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let delOne = {
                        examid: row.examId
                    }
                    console.log(row.examId)
                    deleteexam(delOne);
                    this.exammangero();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            /**
             * 新增取消方法
             * 2017/8/6 by 雷紫辉
             */
            cancelExam(){
                if (this.$refs.cancelReason.validate((v) => {
                        if (v) {
                            this.cancelDialogVisible = false;
                            /*
                             axios发post请求时，默认都是json，后台只能通过requestBody来取，参数的方式取不到
                             URLSearchParams post到后端可直接用参数方式接收到
                             */
                            let params = new URLSearchParams();
                            params.append('examId', this.examId);
                            params.append('cancelReason', this.cancelReason);
                            cancelExam(params).then(res => {
                                if (res.resCode != 0) {
                                    this.$message({
                                        type: 'info',
                                        message: '取消失败！'
                                    });
                                }
                                else {
                                    this.$message({
                                        type: 'success',
                                        message: '取消成功！'
                                    });
                                    /**
                                     * 成功后直接移除数组的某个元素，不用再重新请求后台
                                     */
                                    this.tableData.splice(this.rowIndex, 1);
                                }
                            }).catch(() => {
                                this.$message({
                                    type: 'error',
                                    message: '服务器发生错误！'
                                });
                            });
                        }
                    }));
            }
        }

    }
</script>